import React, { useState, useEffect,useRef } from 'react'
import $axios from '../../utils/axios'
import {Switch,Table,Pagination,Modal,Input,Tooltip,Button,Form} from 'antd'
const { confirm } = Modal;
import { ExclamationCircleOutlined,SearchOutlined  } from '@ant-design/icons';
export default function TagMange() {
  interface IDatum {
    cname: string;
    flag: number;
    id: string;
    lastModifyTime: string;
    name: string;
    number: number;
}
interface IShow{
  isOpen?:boolean,
  name?:string,
  kind?:string,
  id?:string
}
// interface IModalData = {}
const [TagData,setTagData] = useState<IDatum[]>()
const searchKey= useRef<any>(null)
const [page,setPage] = useState(1)
const [PaShow,setPaShow] = useState(true)
const [modal,setModal] = useState<IShow>()
const [count,setCount] = useState(4)
  const getTagData = (page:number,count:number)=>{
    $axios({
      url:'/api/getLabelBySearchPage',
      method:'post',
      data:{
        page:page,
        count:count
      }
    }).then(res=>{
      setTagData(res.data.re)
      console.log(res.data)
    })
  }
useEffect(()=>{
  getTagData(page,count)
},[])
const columns = [
  { title: '编号', dataIndex: 'number' },
  { title: '标签名称', dataIndex: 'name' },
  { title: '添加人', dataIndex: 'cname' },
  { title: '最后修改时间', dataIndex: 'lastModifyTime' },
  { title: '使用状态', dataIndex: 'cname',
  render: (text:string, record:IDatum) => {
    return <Switch defaultChecked={record.flag==0?true:false} checkedChildren="启用" onChange={e=>handleSwitch(record)}  unCheckedChildren="禁用"  />
  }},
  {
    title:'操作',render:(text:string,record:IDatum)=>{
      return <>
      <span style={{color:'#2984F8'}} onClick={()=>showModal("exit",record.id,record.name)}>修改</span>
      &nbsp;&nbsp;&nbsp;
      <span onClick={()=>del(record.id)} style={{color:'#FA746B'}}>删除</span>
      </>
    }
  }
];

const showModal = (kind:string,id:string|undefined,name:string|undefined) => {
  setModal({isOpen:true,kind,id,name});
};

const handleOk = (values:any) => {
  if(modal?.kind=="add"){
    values["creatorld"]= '67e98bc0-ee1b-11ed-8459-c76f227ca8f8'
    $axios({
      url:'/api/saveLabel',
      method:'post',
      data:values
    }).then(res=>{
      console.log(res)
    })
  }
  console.log(values.name)
  console.log(modal)
  setModal({...modal,isOpen:false});
};

const handleCancel = () => {
  setModal({...modal,isOpen:false});
};
const handleSwitch=(record:IDatum)=>{
  const flag = record.flag ==0?1:0
  $axios({
    url:'/api/updateStatusById',
    method:'post',
    data:{
      id:record.id,
      flag:flag
    }
  }).then(res=>{
  })
}
const del= (id:string)=>{
  
        confirm({
          icon: <ExclamationCircleOutlined />,
          title:'删除数据',
          content:"删除后无法撤回，确定删除此条记录吗?",
          cancelText:'取消',
          okText:'确定',
          onOk() {
            console.log(id)
            // $axios({
            //   url:'/api/delLabelById',
            //   method:'post',
            //   data:{
            //     id:id
            //   }
            // }).then(res=>{
            //   console.log(res)
            // })
          },
          onCancel() {
            console.log('Cancel');
          },
        });
}
const onChange=(e:number)=>{
  console.log(e)
  getTagData(e,count)
}
const search = ()=>{
  let key = searchKey.current.input.value
if(key){
  $axios({
    url:'/api/getLabelBySearchPage',
    method:'post',
    data:{
      searchKey:key
    }
  }).then(res=>{
    setTagData(res.data.re)
    setPaShow(false)
  })
}else{
  getTagData(page,count)
  setPaShow(true)
}
}
  return (
    <div style={{width:'1200px',margin:'auto',minHeight:'500px',padding:'30px',backgroundColor:'#fff',}}>
      <div style={{display:'flex'}}>
      <div style={{width:'5px',height:'20px',backgroundColor:'#2984F8',borderRadius:'5px',marginRight:'10px'}}></div>
      <h3>标签管理</h3>  
      </div> 
      <div style={{margin:'20px',width:'100%',display:'flex',justifyContent:'space-between'}}>
        <Input
        placeholder="查找标签"
        style={{width:'400px',height:'40px'}}
        // onChange={getKey}
        ref={searchKey}
        suffix={
          <Tooltip title="Extra information">
            <SearchOutlined  style={{ color: 'rgba(0,0,0,.45)' }} onClick={()=>search()}/>
          </Tooltip>
        }></Input>
        <Button type="primary" onClick={()=>showModal("add",'','')}>新增标签</Button>
      </div>
      <div>
        <Table dataSource={TagData} columns={columns} pagination={false} rowClassName={"old"} rowKey={(record:IDatum)=>{return record.number;}} ></Table>
        <br />
        {PaShow && <Pagination pageSize={count} total={9} showQuickJumper onChange={onChange}/>} 
      </div>
      <Modal title={modal?.kind=='add'?'添加数据':'修改数据'} open={modal?.isOpen} footer={null}>
      <Form
          
          initialValues={{ }}
onFinish={handleOk}
          autoComplete="off"
        >
           <Form.Item
            
            label="标签名"
            name="name"
          >
            <Input placeholder='输入标签名' />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 10, span: 16 }} style={{ marginLeft: '300px', display: 'flex' }}>

<Button type="primary" htmlType="submit">
  确定
</Button>
</Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
